<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>登录</title>
    <!-- 引入Mui -->
    <link rel="stylesheet" href="css/mui.min.css">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="css/public.css">
    <style>
        .bg {
            background-image: url("img/logo_bg.png");
            position: fixed;
            z-index: -1;
            opacity: .8;
            width: 100vw;
            height: 100vh;
            top: 0;
            background-size: 100% 100%;
        }
        .cent{
            width: 80vw;
            background: rgba(255,255,255,.3);
            border-radius: 3vw;
            position: fixed;
            top:24vh;
            left: calc(50% - 40vw);
            padding-bottom: 20px;
        }
        ul{
            list-style: none;
            padding: 0;
        }
        .cent input{
            border: none;
            font-size: 14px;
            width: 90%;
            background: #fff;
            margin-left: 5%;
            padding-left: 10vw;
        }
        .cent ul li{
            position: relative;
        }
        .cent ul li span{
            position: absolute;
            top: 1vh;
            left: 7vw;
        }
        .mui-btn{
            width: 80%;
            margin: 1vh auto;
            font-size: 14px;
            padding: 8px;
            background: #2bcd47;
        }
        .cent h5{
            text-align: center;
            font-size: 24px;
            letter-spacing: 2rem;
            padding-left: 7vw;
        }
        .login-logo{
            width: 20vw;
            height: 20vw;
            background: #008cff ;
            border-radius: 50%;
            margin: -56px auto 0 auto;
            text-align: center;
            line-height: 20vw;
            padding-top: 1vh;
        }
        .login-logo i{
            color: #fff;
            text-align: center;
            font-size: 12vw;
        }
        .mui-btn-green{
            background: #008cff;
            border:none;
        }
        .register ,.forget{
            font-size: 12px;
            color: #fff;
            padding-left: 12px;
        }
        .forget{
            text-align: right;
            padding-right: 12px;
        }
    </style>
</head>
<body>
    <div class="bg"></div>
    <div class="cent" id="login-1">
        <div class="login-logo"><i class="mui-icon mui-icon-contact"></i></div>
        <h5>登录</h5>
        <ul>
            <li>
                <span class="mui-icon mui-icon-person"></span>
                <input  type="text" placeholder="请输入手机号">
            </li>
            <li>
                <span class="mui-icon mui-icon-locked"></span>
                <input type="password" placeholder="请输入密码">
            </li>
            <button class="mui-btn mui-btn-block mui-btn-green">登录</button>
        </ul>
        <div class="mui-row">
            <a href="" class="mui-col-xs-6 mui-col-sm-6 register">账号注册</a>
            <a href="" class="mui-col-xs-6 mui-col-sm-6 forget">忘记密码</a>
        </div>
<!--        <div class="denglu">-->
<!--            <h1 style="color:#24b476;font-weight:800; font-size: 24px">登录</h1>-->
<!--        </div>-->
<!--        <div class="">-->
<!--            <div class="">-->
<!--                <input type="text" placeholder="请输入手机号">-->
<!--            </div>-->
<!--            <div class="">-->
<!--                <input type="password" placeholder="请输入密码">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="aui-content-padded" style="margin: 0 1.8rem;">-->
<!--            <p style="height:2rem;"  onclick="login()">-->
<!--                <img src="img/denglu_button.png" alt="" style="width: 100%;height: 100%;" />-->
<!--            </p>-->
<!--            <div class="mui-row">-->
<!--                <a href="newregister.html" class="mui-col-xs-6 mui-col-sm-6"><p>新用户注册</p></a>-->
<!--                <a href="forget.html" style="text-align: right" class="mui-col-xs-6 mui-col-sm-6"><p>忘记密码</p></a>-->
<!--            </div>-->
<!--        </div>-->

    </div>
</body>
</html>